<template>
	<scroll-view scroll-y="true" style="height: 100vh;">
	<view class="bg-view">
		<!-- 自定义导航栏 -->
		<view :style="'height:' + statusBarHeight + 'px'"/>
		<view class="navTopBox" :style="'height:' + navBarHeight + 'px'">
			<view class="left-button-box" :style="'height:' + menuButtonInfo.height + 'px;margin-top:'+(menuButtonInfo.top - statusBarHeight)+'px'">
					
				<image src="../../static/back.png" @click="tapToBack('back')" mode=""></image>
				<view class="line"></view>
				<image src="../../static/detail/home.png" @click="tapToBack('index')"  mode=""></image>
			</view>
		</view>
		<!-- 预约成功二维码 -->
		<view class="qrcode-box">
			<!-- 用户信息 -->
			<view class="qrcode-top">
				<view class="qrcode-user">
					<image :src="userInfo.avatar" mode=""></image>
					<view class="word-line-clamp1" style="max-width: 320rpx;">{{userInfo.nick_name}}</view>
				</view>
			<!-- 	<view class="qrcode-top-more">
					<text class="qrcode-top-more-text" @click="moreReserva">更多预约</text>
					<uni-icons type="right" size="14" color="#919595"></uni-icons>
				</view> -->
			</view>
			<!-- 二维码生成 -->
			<view class="qrcode">
				<tki-qrcode cid="OrderQrcode" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" :showLoading="false" @result="qrR" />
				<!-- <view class="vue-ref-mtk" v-if="mtkShow">
					<view class="qr-refresh" @click="refreshCode">
							刷新二维码<uni-icons type="refreshempty" color="#fff"></uni-icons>
					</view>
				</view> -->
				<!-- <view class="qr-refresh" @click="refreshCode">
						刷新二维码<uni-icons type="refreshempty" color="#FA6400"></uni-icons>
				</view> -->
			</view>
			
			<view class="qrcode-bottom">
				<image src="../../static/cancel.png" mode=""></image>
				<view @click="cancelStatus(0)">取消预约</view>
				<view class="qrcode-line"></view>
				<image src="../../static/change.png" mode=""></image>
				<view  @click="cancelStatus(1)">修改预约</view>
			</view>
			
		</view>
		
		<!--  取消预约弹窗 -->
		<view class="mask" v-if="maskFlag">
			<view class="cancel_modal">
				<view class="cancel_title">确认要取消预约么？</view>
				<view class="cancel_content">多次取消会影响你的下次预约哦。</view>
				<view class="cancel_btn">
					<view @click="cancelMed(0)">确认取消</view>
					<view @click="cancelMed(1)">不取消</view>
				</view>
			</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="qr-order">
			<view class="order-item">
				<view>预约时间</view>
				<view>{{orderDetail.appointmentDate?orderDetail.appointmentDate:''}} 
				{{orderDetail.startTime?orderDetail.startTime:''}}-{{orderDetail.endTime?orderDetail.endTime:''}}
				</view>
			</view>
			<view class="order-item">
				<view>预约商户</view>
				<view style="display: flex;align-items: center;position: relative;" @click="ShowPhone">
					<view class="word-line-clamp1" style="width: 70%;position: absolute;right:70rpx;">{{orderDetail.businessName}}</view>
					<image style="position: absolute;right: 0;" src="../../static/detail/phone.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="order-item">
				<view>商户地址</view>
				<view class="word-line-clamp2">{{orderDetail.businessAddress}}</view>
			</view>
		</view>
		
		<!-- 预约须知 -->
		<view class="qr-tips">
			<view class="qr-tips-content">
				预约须知：为了更好的保障你的服务体验，请到店主动出示二维码给到商户进行核销，预约使用最早使用当天预约时段提前30分钟可使用。
				<!-- <text style="font-weight: bold;">请务必提前15分钟到店并主动出示二维码给到商户进行核销</text>，如果迟到超过45分钟，商户有可能会拒绝为您提供服务。 -->
			</view>
		</view>
		<!--  -->
		<view class="phone-list" v-if="phoneFlag" :style="'padding-bottom:'+(bottomTabbar>0?bottomTabbar:10)+'px;'">
			<view class="phone-item" style="color: #999;">联系商家</view>
			<view class="phone-item" v-for="(phone , pIndex) in orderDetail.phone" :key="pIndex" @click="callPhone(phone)">{{phone}}</view>
			<view class="phone-item" style="color: #999;border-top: 10rpx solid #f7f7f7;" @click="closeMask">取消</view>
		</view>
	</view>
	</scroll-view>
</template>

<script>	
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import {bookingOrderDetail , UpdateAppointmentStatus} from '../../apis/booking.js';
	var app = getApp();
	export default {
		data() {
			return {
				statusBarHeight: 0,
				windowHeight: 0,
				menuButtonInfo: [],
				navBarHeight: 0,
				bottomTabbar:0,
				userInfo: {},
				maskFlag:false, // 取消弹窗
				phoneFlag:false,//电话弹窗
				openid: "",
				orderId :0,
				orderDetail:{},
				timestamp:0,
				val: '', // 要生成的二维码值
				size: 200, // 二维码大小
				unit: 'px', // 单位
				background: '#ffffff', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 角标色
				icon: '../../static/logo.png', // 二维码图标
				iconsize: 30, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				
				mtkShow:false,
				timing:'',
			}
		},
		components: {
			tkiQrcode
		},
		
		onReady() {
			// 自定义导航栏内容
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.navBarHeight = this.menuButtonInfo.height +  (this.menuButtonInfo.top - this.statusBarHeight) * 2;
		},
		onLoad(options) {
			console.log(options,"111")
			let that = this;
			that.orderId = options.orderId;
			app.isLogin({},function(login){
				that.userInfo = login;
				uni.setStorageSync('mineInfo',login);
				// const timestamp = new Date().getTime(); 
				// that.timestamp = timestamp;
				// console.log(9999)
				// that.val = encodeURIComponent(JSON.stringify({
				// 	orderId:login.id,
				// 	timestamp:timestamp,
				// 	type:'booking'
				// }));
				that.BookingOrderDetail();
			})
		},
		
		onShow(){
			
			if(this.orderDetail){
				this.BookingOrderDetail();
			}
			
			let that = this;
			clearInterval(that.timing)
			
			let allNum=0
			that.timing=setInterval(function(){
				allNum++
				// console.log(allNum,"allNum")
				if(allNum==5){
					allNum=0
					// console.log(allNum,"allNum2")
					bookingOrderDetail({id:that.orderId}).then(res=>{
						that.orderDetail = res.data;
						
						let mineInfo = uni.getStorageSync('mineInfo');
						let timestamp = res.data.currentTimestamp;
						that.val = encodeURIComponent(JSON.stringify({
							orderId:res.data.id,
							timestamp:timestamp,
							type:'booking'
						}));
					});
				}
				that.statusSelect();
			},1000)
			
			// let mineInfo = uni.getStorageSync('mineInfo');
			// const timestamp = new Date().getTime();
			// this.val = encodeURIComponent(JSON.stringify({
			// 	orderId:mineInfo.id,
			// 	timestamp:timestamp,
			// 	type:'booking'
			// }));
			// console.log(222)
			// let that=this
			// var timerId = setTimeout(function(){
			// 	that.mtkShow=true
			// },30000);
			
		},
		onUnload(){
			console.log("离开")
			this.closeTime();
		},
		onHide(){
			this.closeTime();
		},
		methods: {
			refreshCode(){
				this.mtkShow=false
				
				uni.showToast({
					title:'刷新二维码',
					icon:'loading',
					duration:1000
				})
				
				this.BookingOrderDetail();
				// let mineInfo = uni.getStorageSync('mineInfo');
				// const timestamp = new Date().getTime();
				// this.val = encodeURIComponent(JSON.stringify({
				// 	orderId:mineInfo.id,
				// 	timestamp:timestamp,
				// 	type:'booking'
				// }));
				
				
				// let that=this
				// var timerId = setTimeout(function(){
				// 	that.mtkShow=true
				// },30000);
				
			},
			closeMask(){
				this.phoneFlag = false;
			},
			ShowPhone(){
				this.phoneFlag = true;
			},
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone,
				})
			},
			// 关闭定时
			closeTime(){
				clearInterval(this.timing)
			},
			statusSelect(){
				let that = this;
				bookingOrderDetail({id:that.orderId}).then(res=>{
					  if(res.data.status==1){
							this.closeTime();
							uni.navigateTo({
								url: '/pageD/resultSu/resultSu?type=1',
							});
						}
				});
			},
			BookingOrderDetail(){
				let that = this;
				bookingOrderDetail({id:that.orderId}).then(res=>{
					that.orderDetail = res.data;
					
					let mineInfo = uni.getStorageSync('mineInfo');
					let timestamp = res.data.currentTimestamp;
					console.log(mineInfo,"mineInfo")
					that.val = encodeURIComponent(JSON.stringify({
						orderId:res.data.id,
						timestamp:timestamp,
						type:'booking'
					}));
					// var timerId = setTimeout(function(){
					// 	that.mtkShow=true
					// },30000);
					
					
					if(that.orderDetail.phone[0].indexOf(';')>=0){
						that.orderDetail.phone = that.orderDetail.phone[0].split(';')
					}
				});
			},
			cancelMed(i){
				let that = this;
				switch(i){
					case 0:
						// 确认取消
						UpdateAppointmentStatus({
							id:that.orderId,
							status:3
						}).then( cancel => {
							that.maskFlag = false;
							if(cancel.code == 200 ){
								uni.showToast({
									title:'取消成功',
									icon:'none',
									duration:2000
								});
								setTimeout(function(){
									uni.navigateBack({
										delta:1
									})
								},1500)
							}else {
								uni.showToast({
									icon:"none",
									title:cancel.message
								})
							}
						})
					break;
					case 1:
						//  坚持训练
						that.maskFlag = false;
					break;
				}
			},
			cancelStatus(i){
				let that = this;
				
				switch(i){
					case 0:
						// 取消预约
						that.maskFlag = true;
					break;
					case 1:
						let now = new Date().getTime();
						let startBooking = that.orderDetail.appointmentDate + ' ' + that.orderDetail.startTime;
						startBooking = startBooking.replace('.','/');
						startBooking = new Date(startBooking.replace('.','/')).getTime();
						
						let endBooking = that.orderDetail.appointmentDate + ' ' + that.orderDetail.endTime;
						endBooking = endBooking.replace('.','/');
						endBooking = new Date(endBooking.replace('.','/')).getTime();
						if(startBooking>now){
							if(startBooking-now<=1000*60*15){
								uni.showToast({
									title:'您已临近预约时间，不可修改预约时间',
									icon:'none'
								})
							}else{
								let location = app.globalData.latitude + "," + app.globalData.longitude;
								 // 修改预约
								uni.navigateTo({
									url:'../reservation/reservation?type=update&store_id='+that.orderDetail.businessId+'&location='+ location + '&orderId=' + that.orderDetail.id
								})
							}
						}else if(startBooking<now && endBooking>now){
							uni.showToast({
								title:'距离预约开始时间少于15分钟，无法修改哦！',
								icon:'none'
							})
						}else{
							uni.showToast({
								title:'当前预约已过期，不可修改时间',
								icon:'none'
							})
						}
						
						// uni.showToast({
						// 	icon:'none',
						// 	title:"暂不支持线上修改，请联系客服"
						// })
					break;
				}
			},
			// 生成二维码
			qrR(res) {
				this.src = res;
			},
			// 返回按钮
			tapToBack(page) {
				switch(page){
					case 'index':
						uni.switchTab({
							url:'../index/index'
						})
					break;
					case 'back':
						uni.navigateBack({
							delta:1,
							fail() {
								uni.switchTab({
									url:'../index/index'
								})
							}
						})
					break;
				}
			},
			moreReserva(){
				uni.navigateTo({
					url:'../orderList/orderList'
				})
			}
		},
	}
	
</script>

<style lang="scss">
	page {
		background: #FFD60A;
	}
	.bg-view {
		background: url("https://imgs.ynz666.com/2022/02/09/%E6%A4%AD%E5%9C%86%E5%BD%A2.png");
		background-repeat:no-repeat;
		background-size: 50%;
		background-position: top right;
	}
	
	.navTopBox {
	
		.left-button-box {
			width: 150rpx;
			background-color: rgba(255,255,255,.2);
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 30rpx;
			
			.line {
				height: 30rpx;
				background-color: #F4DC84;
				width: 2rpx;
			}
			
			image {
				width: 30rpx;
				height: 30rpx;
				margin: 0 20rpx;
			}
		}
	}
	.qrcode-box {
		width: 630rpx;
		// height: 700rpx;
		padding: 30rpx 30rpx 0 30rpx ;
		margin: 0 auto;
		position: relative;
		margin-top: 42rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		.qrcode-top {
			height: 60rpx;
			display: flex;
			justify-content: space-between;
			
			.qrcode-user{
				display: flex;
				font-size: 32rpx;
				font-weight: bold;line-height: 60rpx;
				color: #333333;
				
				image {
					width: 60rpx;
					height: 60rpx;
					border: 2rpx solid #FA6400;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}
			.qrcode-top-more {
				font-size: 24rpx;
				color: #999999;
				line-height: 60rpx;
				.qrcode-top-more-text {
					margin-right: 10rpx;
				}
				uni-icons {
					line-height: 60rpx;
				}
			}
		}
		
		.qrcode {
			width: 200px;
			height: 200px;
			border: 4rpx solid #F9C500;
			margin: 60rpx auto;
			position: relative;
			.vue-ref{
				width: 200px;
				height: 200px;
			}
			.vue-ref-mtk{
				width: 200px;
				height: 200px;
				background:rgba(0, 0, 0, 0.5);
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.qr-refresh {
				font-size: 28rpx;
				text-align: center;
				color: #fff;
				line-height: 80rpx;
			}
		}
		
		.qrcode-bottom {
			background-color: #FFFFFF;width: 100%;height: 100rpx;border-top:1rpx solid #EFEFEF;;
			// position: absolute;bottom: 0;left: 0;
			display: flex;justify-content: center;
			font-size: 30rpx;
			color: #333333;
			line-height: 100rpx;border-bottom-left-radius: 24rpx;border-bottom-right-radius: 24rpx;
			image {
				width: 32rpx;height: 32rpx;
				margin: 34rpx 10rpx 0 0rpx;
			}
			.qrcode-line {
				width: 1rpx;
				height: 32rpx;
				background: #D8D8D8;margin: 34rpx 90rpx 0 90rpx;
			}
		}
	}
	
	// 取消预约提示弹窗
	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;top: 0;left: 0;
		background: rgba(0, 0, 0, 0.5);
		
		.cancel_modal {
			
			background-color: #FFFFFF;
			border-radius: 24rpx;
			padding: 50rpx 0;
			width: 80%;
			position: absolute;
			top:50%;left: 10%;
			margin-top: -236rpx;
			text-align: center;
			
			.cancel_title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}
			
			.cancel_content {
				width: 60%;
				margin: 20rpx auto;
				font-size: 24rpx;
				color: #333333;
				margin-bottom: 40rpx;
				white-space:pre-wrap;
				line-height: 40rpx;
			}
			
			.cancel_btn {
				display: flex;
				justify-content: center;
				
				view {
					width: 200rpx;
					height: 68rpx;
					line-height: 68rpx;
					border-radius: 40rpx;
					font-size: 24rpx;
					font-weight: bolder;
					margin: 0 15rpx;
				}
				
				view:nth-child(1){
					border: 1rpx solid #666666;
					color: #666666;
				}
				
				view:nth-child(2){
					background: #FA6400;
					color: #333;
					border: 1rpx solid #FA6400;
				}
			}
		}
	}
	
	.qr-order {
		width: 630rpx;
		padding: 0 30rpx ;
		margin: 20rpx auto;
		background: #FFFFFF;
		border-radius: 24rpx;
		
		.order-item {
			padding: 40rpx 0;
			border-bottom: 1rpx solid #EFEFEF;
			display: flex;justify-content: space-between;
			align-items: center;
			view:nth-child(1){
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
			}
			view:nth-child(2){
				text-align: right;
				width:80%;word-wrap:break-word ;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}
			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	
	.qr-tips {
		width: 690rpx;
		height: 254rpx;
		margin: 40rpx auto;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		
		.qr-tips-content {
			line-height: 40rpx;
			white-space: pre-wrap;
		}
	}
	
	.phone-list {
		padding: 30rpx 0;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		width: 100vw;
		font-size: 32rpx;
		color: #141414;
		.phone-item  {
			text-align: center;
			border-bottom: 1rpx solid #f7f7f7;
			padding: 20rpx 0;
		}
		.phone-item:last-child{
			border: none;
		}
	}
</style>
